<template>
	<div>
		<div>
			<el-button @click="addDialog = true">添加用户</el-button>
		</div>
		<el-table :data="tableData.records">
			<el-table-column prop="username" label="用户名" width="120" />
			<el-table-column prop="name" label="真实姓名" width="200" />
			<el-table-column prop="avatar" label="头像" width="200">
				<template #default="scope">
					<el-image style="width: 80px; height: 50px" fit="fill" :src="scope.row.avatar" />
				</template>
			</el-table-column>
			<el-table-column prop="email" label="邮箱" />
			<el-table-column prop="phone" label="联系方式" width="120" />
			<!--			<el-table-column prop="level" label="等级" width="100px" />-->
			<el-table-column label="Operations">
				<template #default="scope">
					<el-button size="small" @click="openEditUser(scope.row.id)">修改</el-button>
					<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="修改"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formUser" label-width="120px">
				<el-form-item label="昵称">
					<el-input v-model="formUser.username" />
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="formUser.password" />
				</el-form-item>
				<el-form-item label="真名">
					<el-input v-model="formUser.name" />
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="formUser.phone" />
				</el-form-item>
				<el-form-item label="用户等级">
					<el-select v-model="formUser.level" disabled>
						<el-option label="管理员" :value="1" />
						<el-option label="普通用户" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="formUser.email" />
				</el-form-item>
				<el-form-item label="头像">
					<el-upload
						v-model:file-list="uploadList"
						:headers="{ token }"
						:action="uploadUrl"
						list-type="picture-card"
						:limit="1"
						:on-success="uploadSuccess"
					>
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="edit">更新</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 7e00010005999999911800077fbc810300cb7e  -->
		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="addDialog"
			title="新增"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formUser" label-width="120px">
				<el-form-item label="昵称">
					<el-input v-model="formUser.username" />
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="formUser.password" />
				</el-form-item>
				<el-form-item label="真名">
					<el-input v-model="formUser.name" />
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="formUser.phone" />
				</el-form-item>
				<el-form-item label="用户等级">
					<el-select v-model="formUser.level">
						<el-option label="管理员" :value="1" />
						<el-option label="普通用户" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="formUser.email" />
				</el-form-item>
				<el-form-item label="头像">
					<el-upload
						v-model:file-list="uploadList"
						:action="uploadUrl"
						:headers="{ token }"
						list-type="picture-card"
						:on-success="uploadSuccess"
						:limit="1"
					>
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="add">添加</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { addUser, deletedUser, getUserById, getUserList, updateUser } from "@/api/user";
import { useUserStore } from "@/stores/userStores";

const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
	// level: 2, // 查询普通用户
});
const formUser = ref({
	avatar: "",
});
const userStore = useUserStore();
const token = userStore.token;
const uploadList = ref([]);
const uploadUrl = import.meta.env.VITE_BASE_URL + "/file/upload";

const editDialog = ref(false);
const addDialog = ref(false);

const openEditUser = async (id) => {
	const res = await getUserById(id);
	if (res.success) {
		formUser.value = res.data;
		// 设置密码为空
		formUser.value.password = null;
		if (res.data.avatar) {
			uploadList.value.push({ url: res.data.avatar });
		}
		editDialog.value = true;
	} else {
		ElMessage.error(res.msg);
	}
};
const edit = async () => {
	const res = await updateUser(formUser.value);
	if (res.success) {
		ElMessage.success("修改成功");
	} else {
		ElMessage.error(res.msg);
	}
	editDialog.value = false;
	resetForm();
	loadData();
};

const add = async () => {
	const res = await addUser(formUser.value);
	if (res.success) {
		ElMessage.success("添加成功");
	} else {
		ElMessage.error(res.msg);
	}
	addDialog.value = false;
	resetForm();
	loadData();
};
const deleted = async (id) => {
	ElMessageBox.confirm("确认要删除该用户?", "Warning", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedUser({ id });
		if (res.success) {
			ElMessage.success("删除完成");
		} else {
			ElMessage.error(res.msg);
		}
		loadData();
	});
};
const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.success) {
		formUser.value.avatar = response.data;
	}
};
const resetForm = () => {
	if (addDialog.value) {
		addDialog.value = false;
	}
	if (editDialog.value) {
		editDialog.value = false;
	}
	formUser.value = {};
	uploadList.value = [];
};

const loadData = async () => {
	const res = await getUserList({
		page: tableData.page,
		size: tableData.size,
	});
	if (res.success) {
		tableData.records = res.data.list;
		tableData.page = res.data.pageNum;
		tableData.pages = res.data.pages;
	}
};
onMounted(() => {
	loadData();
});
</script>

<style scoped></style>
